<template>
<el-dialog   :visible.sync="visible" :title="dataForm.details ? '详情' :(!dataForm.id ? $t('add') : $t('update'))" :close-on-click-modal="false" :close-on-press-escape="false" @close="close()" :destroy-on-close="true" @opened="opened()">
    <el-form class="" :model="dataForm"  ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'">
        <el-row>
            <el-col :span="12">
                <el-form-item label="菜品名称" prop="name">
                    <el-input v-model="dataForm.name" placeholder='菜品名称'></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="文本介绍" prop="info">
                    <el-input v-model="dataForm.info" placeholder="文本介绍"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="24">
                <el-form-item label="图片(最多10张)" prop="">
                    <el-upload :action="url" :file-list="fileList" :limit="10" :before-upload="beforeUploadHandle" list-type="picture-card" :on-success="successHandle" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-col>

        </el-row>
    </el-form>
    <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
export default {
    data() {
        return {
            visible: false,
            fileList: [],
            url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
            dataForm: {
                id: '',
                name: "",
                info: '',
                urlList: []
            },
        };
    },
    methods: {
        //移除图片
        handleRemove(file, fileList) {
            this.fileList = fileList.map((item) => {
                return item.url;
            });
        },
        // 上传之前
        beforeUploadHandle(file) {
            if (
                file.type !== "image/jpg" &&
                file.type !== "image/jpeg" &&
                file.type !== "image/png" &&
                file.type !== "image/gif"
            ) {
                this.$message.error(this.$t("upload.tip", {
                    format: "jpg、png、gif"
                }));
                return false;
            }
        },
        // 上传成功
        successHandle(res, file, fileList) {
            if (res.code !== 0) {
                return this.$message.error(res.msg);
            }
            this.fileList.unshift({
                name: "",
                url: res.data.url,
            });

        },
        close() {
            this.fileList = [];
            this.dataForm = {
                id: "",
                name: "",
                info: "",
                urlList: []
            };
        },
        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get("/sys/isspecialfood/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                    // 图片处理
                    if (this.dataForm.urlList.length == 0) {
                        this.fileList = [];
                    } else if (this.dataForm.urlList) {
                        this.fileList = this.dataForm.urlList.map((item, index, arr) => {
                            let json = {};
                            json.name = "";
                            json.url = item;
                            return json;
                        });
                    }

                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    //图片处理
                    this.dataForm.urlList = this.fileList.map((item) => {
                        return item.url;
                    });
                    if(this.dataForm.urlList.length==0){
                        return this.$message.error('图片至少上传一张');
                    }
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/sys/isspecialfood",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>
